<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport"  content="width=device-width,user-scalable=no">
	<meta name="copyright" content="Copyright (c) TouchSlide 大话主席 2013">
	<meta name="Keywords" content="TouchSlide, javascript触屏滑动特效插件, 移动终端滑动特效,触屏图片滑动, 触屏Tab切换,触屏多图切换等">
	<meta name="description" content="TouchSlide, javascript触屏滑动特效插件, 移动终端滑动特效,触屏图片滑动, 触屏Tab切换,触屏多图切换等">
	<title>TouchSlide 3.4搜狐焦点图 触屏滑动特效插件 大话主席 </title>
</head>


<script src="../TouchSlide.1.1.js"></script>
<!-- 若想了解更详细使用方法，请访问 http://www.superslide2.com/touchSlide/ -->


<style type="text/css">
	/* css 重置 */
	body, p, input, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form { margin: 0; padding: 0; list-style: none; vertical-align: middle; font-weight:normal; }
	img { border:0; margin: 0; padding: 0;   }
	body { color: #000; -webkit-user-select: none; -webkit-text-size-adjust: none; font:normal 16px/200% "微软雅黑", helvetica, arial; text-align:left;   }
	header, section, footer { display: block; margin: 0; padding: 0 }
	a{text-decoration:none;color:#000;}
	
	body{ background:#f4f4f4;  }
	/* 头部 */
	header{  background:#F5AB38; padding-bottom:10px; border-bottom:3px solid #CF7F21;  }
	header .logo{ padding:10px 0 5px 10px;  color:#fff;  font-style:italic; font-weight:bold; text-shadow:1px 1px 1px #965e18; font-size:12px; }
	header .logo a{ font-size:30px; line-height:30px; color:#fff;  }

	/* 尾部 */
	footer{ text-align:center; padding:10px 0; line-height:18px; font-size:14px; }

	/* 内容 */
	#content{ padding:10px 0; background:#fff;  }
	.path{ padding:0 0 5px 5px;   }

	/* 效果导航 */
	.effectNav{ margin-top:10px;  border-top:1px solid #666; background:#999; padding-bottom:10px;  }
	.effectNav h3{ padding:0 10px; background:#ddd; background:#333; color:#fff;  }
	.effectNav ul{ font-size:0;  }
	.effectNav li{ display:inline-block; font-size:12px; padding:0 10px; margin:10px 0 0 10px;  background:#cdcdcd;  }
	.effectNav li.new{ background:#fce8cd;  }


	/* 本例子css -------------------------------------- */
	.slideBox{ position:relative; width:320px;  height:152px; overflow:hidden; margin:10px auto; }
	.slideBox .hd{ position:absolute; width:100%;  height:27px; bottom:0; left:0; z-index:1; }
	.slideBox .hd img{ width:11px;  }
	.slideBox .prev,.slideBox .next{ position:absolute; left:0; top:0; display:block; width:23px; height:27px; line-height:27px; text-align:center;   }
	.slideBox .next{ left:auto; right:0;}
	.slideBox .bd{ position:relative; z-index:0; }
	.slideBox .bd li{ position:relative; }
	.slideBox .bd li img{ width:320px;  height:152px; display:block;   }
	.slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */  }
	.slideBox .bd li .tit{ display:block; width:100%;  position:absolute; bottom:0; text-indent:10px; height:27px; line-height:27px;  text-align:center;  color:#fff; background-color:rgba(0,0,0,0.7); ; 
	}
</style>

<body>
	<!-- 头部 -->
	<header>
			<h1 class="logo"><a href="http://www.superslide2.com/TouchSlide/">TouchSlide</a> 触屏滑动特效插件</h1>
	</header>

	<div id="content">
			<div class="path">当前效果：3.4搜狐焦点图</div>
			
			<!-- 本例主要代码 Start ================================ -->
			<div id="slideBox" class="slideBox">

				<div class="bd">
					<ul>
						<li>
							<a class="pic" href="#"><img src="images/1.jpg" /></a>
							<a class="tit" href="#">汤唯新片大卖请剧组吃回锅肉</a>
						</li>
						<li>
							<a class="pic" href="#"><img src="images/2.jpg"/></a>
							<a class="tit" href="#">范冰冰黄晓明亲密无间</a>
						</li>
						<li>
							<a class="pic" href="#"><img src="images/3.jpg"/></a>
							<a class="tit" href="#">一周体育快报</a>
						</li>
						<li>
							<a class="pic" href="#"><img src="images/4.jpg"/></a>
							<a class="tit" href="#">金正恩携娇妻视察</a>
						</li>
					</ul>
				</div>

				<div class="hd">
					<span class="prev"><img src="images/sohu-prev.png"/></span>
					<span class="next"><img src="images/sohu-next.png"/></span>
				</div>

			</div>
			<script type="text/javascript">
				TouchSlide({ slideCell:"#slideBox", mainCell:".bd ul", effect:"leftLoop" });
			</script>
			<!-- 本例主要代码 End ================================ -->


			<!-- 效果导航 -->
			<div class="effectNav">
					<h3>效果导航</h3>
					<ul>
						<li><a href="1.1left.html">1.1 左滑动</a></li>
						<li><a href="1.2leftLoop.html">1.2 左循环滑动</a></li>
					</ul>
					<ul>
						<li class="new" title="v1.1新demo"><a href="2.1web.html">2.1 综合手机网站效果[new]</a></li>
						<li><a href="2.2picScroll.html">2.2 多图滑动</a></li>
					</ul>
					<ul>
						<li><a href="3.1focus.html">3.1 焦点图切换加载</a></li>
						<li><a href="3.2txFocus.html">3.2 腾讯焦点图</a></li>
						<li><a href="3.3tbFocus.html">3.3 淘宝焦点图</a></li>
						<li><a href="3.4sohuFocus.html">3.4 搜狐焦点图</a></li>
						<li class="new" title="v1.1新demo"><a href="3.5zsyFocus.html">3.5 焦点图自适应宽</a></li>
					</ul>
					<ul>
						<li><a href="4.1txTab.html">4.1 腾讯Tab</a></li>
						<li><a href="4.2wyTab.html">4.2 网易Tab</a></li>
						<li class="new" title="v1.1新demo"><a href="4.3zsyTab.html">4.3 Tab自适应高度</a></li>
					</ul>
			</div>

	</div>

	<footer>
		Copyright ©2013 大话主席 <a target="_blank" href="http://www.superslide2.com/">SuperSlide2.com</a>
	</footer>

</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>